//定义懒加载插件

import { useIntersectionObserver } from '@vueuse/core'

// 这个js用来管理插件的
export const lazyPlugin = {
  install(app) {
    //懒加载指令逻辑
    //定义全局指令，图片懒加载
    app.directive('img-lazy', {
      mounted(el, binding) {
        //el:指令绑定的那个元素，img
        //：binding：bingding.valua指令等于号后面绑定的表达式的值，比如图片的url
        // console.log(el, binding.value)
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // console.log(isIntersecting)
          if (isIntersecting) {
            //进入视口监听区域
            el.src = binding.value
            //首次图片加载完后就停止监听
            stop()
          }
        })
      }
    })
  }
}
